<template>
	<div class="container">
		<div class="info">
			<div class="radio-box flex">
				<van-radio-group v-model="radio" checked-color="#8F44EB" icon-size="15">
					<van-radio name="1">建议</van-radio>
					<van-radio name="2">投诉</van-radio>
				</van-radio-group>
			</div>
			<div class="opinion-tips">{{ radio == 1 ? '建议' : '投诉' }}内容<i>*</i></div>
			<van-field v-model="cont" rows="2" autosize label="" type="textarea" maxlength="200" :placeholder="`请提供你的${radio == 1 ? '宝贵建议' : '投诉'}，我们将努力改进…`" show-word-limit />
			<div class="uploader-tips">上传图片<span>(最多三张)</span><i v-if="radio == 2">*</i></div>
			<van-uploader :after-read="afterRead" :max-count="3" v-model="fileList" />
			<div class="uploader-tips" style="">联系方式<i>*</i></div>
			<van-field v-model="contact_name" placeholder="请留下你的姓名" />
			<van-field v-model="contact_mobile" maxlength="11" type="number" placeholder="为了方便联系你请留下联系方式" />
		</div>
		<div class="submit">
			<van-button :loading="loading" type="primary" loading-text="提交中..." @click="submit">提交</van-button>
		</div>
	</div>
</template>
<script>
	// const {VUE_APP_APIHOST} = process.env
	const reg = /^[1][3-9][0-9]{9}$/
	export default {
		metaInfo() {
			return {
				title: '投诉与建议',
			}
		},
		data() {
			return {
				radio: '1',
				cont: '',
				loading: false,
				fileList: [],
				contact_mobile: '',
				contact_name: '',
			}
		},
		methods: {
			async afterRead(file) {
				console.log(file)
			},
			async submit() {
				const { cont, contact_mobile, fileList, radio, contact_name } = this
				if (!cont) {
					this.$toast('内容不能为空!')
					return
				}
				if (radio == 2 && !fileList.length) {
					this.$toast('请先上传图片!')
					return
				}
				if (!contact_name) {
					this.$toast('姓名不能为空!')
					return
				}
				if (!reg.test(contact_mobile)) {
					this.$toast('手机格式不正确!')
					return
				}
				let form = new FormData()
				if (fileList.length) {
					fileList.map((e) => {
						form.append('img[]', e.file)
					})
				}
        form.append('order_sn',this.$route.query.order_sn)
				form.append('content', cont)
				form.append('type', radio)
				form.append('mobile', contact_mobile)
				form.append('name', contact_name)
				this.loading = true
				await this.$api.adComplaint(form).finally(() => {
					this.loading = false
				})
				this.fileList = []
				this.cont = ''
				this.contact_mobile = ''
				this.contact_name = ''
				this.$toast({
					message: '提交成功!',
					duration: 1500,
					onClose: () => {
						this.tel = ''
					},
				})
			},
		},
	}
</script>
<style lang="scss" scoped>
	.container {
		.info {
			padding: 15px;
			padding-top: 20px;
			padding-bottom: 100px;
		}
		::v-deep .van-radio-group {
			display: flex;
			width: 100%;
			.van-radio {
				width: 50%;
				font-size: 15px;
				font-weight: 500;
			}
		}
		.opinion-tips {
			margin-top: 15px;
			font-size: 15px;
			font-weight: 500;
			i {
				color: #fa3534;
			}
		}
		.xing {
			&-item {
				margin-bottom: 20px;
				span {
					font-size: 15px;
					margin-right: 15px;
				}
			}
		}
		::v-deep {
			.van-cell {
				padding-left: 0;
				padding-right: 0;
			}
			.van-cell::after {
				border-bottom: none;
			}
			.van-cell__value {
				background: #f5f6f6;
				color: #999999;
				padding: 10px;
			}
			.van-field__word-limit {
				color: #999999;
			}
			.van-uploader__upload {
				width: 105px;
				height: 105px;
			}
			.van-uploader__preview-image {
				width: 105px;
				height: 105px;
			}

			.van-button--primary {
				width: 100%;
				background: #8f44eb;
				border-color: #8f44eb;
				border-radius: 3px;
				margin-top: 40px;
			}
			.van-radio__label {
				line-height: 1;
				font-size: 15px !important;
				font-weight: 500 !important;
			}
		}

		.uploader-tips {
			font-size: 15px;
			margin-top: 15px;
			margin-bottom: 10px;
			font-weight: 500;
			i {
				color: #fa3534;
			}
			span {
				color: #ccc;
				font-size: 12px;
			}
		}
		.submit {
			width: 100%;
			text-align: center;
			position: fixed;
			padding: 10px 15px;
			bottom: 0;
		}
	}
</style>